<template>
  <div>
     <div ref="mz" class="title">我是标题</div>
      <p @click="hi = '你坏'">{{ hi }}</p>
     <my-son ref="son"/>

     <button @click="fn1" v-if="show">搜索</button>
     <input ref="inp" v-else type="text">

     <h3>以下学自定义指令</h3>
     <p v-color="color">你好</p>
     <div v-color="color">你坏</div>
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  directives: {
    // color: {
    //   // 参数1：el就是绑定这个指令的对象
    //   // 参数2：是一个对象，对象里有指令的相关信息，里面有个属性叫value，value就是这个指令绑定的数据
    //   bind (el, obj) {
    //     // 绑定时调用
    //     console.log('bind', el, obj)
    //     el.style.color = obj.value
    //   },

    //   // 当指令绑定的数据发生改变会调用
    //   // 参数跟上是一样的
    //   update (el, obj) {
    //     // 把改变后的数据的值再赋值一次即可
    //     el.style.color = obj.value
    //   }
    // }

    // 当bind里的代码和update里的代码一致，就可以简写
    color (el, obj) {
      el.style.color = obj.value
    }
  },
  components: {
    MySon
  },
  data () {
    return {
      color: 'orange',
      show: true,
      hi: '你好'
    }
  },
  methods: {
    fn1 () {
      // 在vue里dom渲染是异步的，就意味着要等同步代码执行完才会去渲染
      this.show = false // 这句话后不会立即有input，只是说准备有input
      // 获得焦点
      console.log(this.$refs.inp)
      // this.$refs.inp.focus()

      this.$nextTick(() => {
        // 回调函数会在下一次dom更新后自动调用，而且只会调用一次
        this.$refs.inp.focus()
      })
    }
  },
  // 只要一更新就会触发
  // updated () {
  //   this.$refs.inp.focus()
  // },
  mounted () {
    // // console.log(document.querySelector('.title'))

    // console.log(this.$refs.mz)

    // // 这里找到的组件对象，相当于这个组件内部的this
    // console.log(this.$refs.son)
    // // 妙用：快速父传子
    // this.$refs.son.msg = '父传递的数据'
  }
}
</script>

<style>

</style>
